import React from 'react'
import {Switch, Route, Link} from "react-router-dom"
import Home from "./Home"
import About from "./About"
import TodoAdd from './TodoAdd'
import TodoDetail from './TodoDetail'
import TodoEdit from './TodoEdit'
import PrivateRoute from '../components/PrivateRoute'
import {useStore} from '../store'

export default function Layout(props) {
  const store = useStore()

  const quitHandler = () => {
    store.userStore.logout()
    console.log(props)
    //sessionStorage.removeItem('token') 状态管理去操作
    props.history.push('/login')
  }
  return (
    <div className='layout'>
      <header className='app-head'>
        <h1>logo</h1>
        <div className='app-center'>
          <span>个人中心</span>
          <button onClick={quitHandler}>退出</button>
        </div>
      </header>

      <div className='app-body'>
        <ul className='app-menu'>
          <li>
            <Link to='/home'>首页</Link>
          </li>
          <li>
            <Link to='/home/about'>about</Link>
          </li>
          <li>
            <Link to='/login'>登录</Link>
          </li>
        </ul>

        <div className='app-view'>

          {/* 路由拦截 */}
          <PrivateRoute path='/home' exact component={Home}></PrivateRoute>
          <PrivateRoute path='/home/about' component={About}></PrivateRoute>
          <PrivateRoute path='/home/todoedit' component={TodoEdit}></PrivateRoute>
          <PrivateRoute path='/home/todoadd' component={TodoAdd}></PrivateRoute>
          <PrivateRoute path='/home/tododetail' component={TodoDetail}></PrivateRoute>

          {/* <Route path='/home' exact>
            <Home />
          </Route>
          <Route path='/home/about' component={About}></Route>
          <Route path='/home/todoedit' component={TodoEdit}></Route>
          <Route path='/home/todoadd' component={TodoAdd}></Route>
          <Route path='/home/tododetail' component={TodoDetail}></Route> */}
        </div>
      </div>
    </div>
  )
}
